<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 1. 理论上，obj没有notExist这个属性，那么notExist属性不会和副作用域函数建立联系
        //    effect调用 -> obj.text访问 -> 副作用域函数加入bucket桶的数据结构 -> 下次修改时 -> 触发set -》 先修改值 -》再调用副作用域函数 那么字段和函数建立联系
        //    都没有字段 -> 建立什么联系
        //    但是确实就是有联系 -> 因为我们原来并没有明确联系 -> 无论读取哪一个属性，都会触发get -> 无论设置哪一个属性，都会触发set -> 这个可以直接测试
        let data = { text: '123' }
        let bucket = new Set()
        let activeAffect
        function effect(fn) {
            // 把副作用函数存储给 activeAffect
            activeAffect = fn
            // 执行副作用函数
            fn()
        }
        let obj = new Proxy(data, {
            get(target, key) {
                bucket.add(activeAffect)
                console.log('访问了属性');
                return target[key]
            },
            set(target, key, newVal) {
                target[key] = newVal
                console.log('修改了属性');
                bucket.forEach(fn => fn())
                return true
            }
        })
        effect(
            () => {
                console.log('1'); // 这句代码被打印了两次
                document.body.innerHTML = obj.text
            }
        )
        obj.text = '456' // 执行了一次
        obj.notExist = 'hello vue3' // 如果obj里面没有notExist，那么obj.notExist就不应该和副作用函数建立联系，但是这里还是触发了set
    </script>
</body>

</html>